<template>
  <div class="resize-grid" ref="resizeGrid">
    <slot></slot>
    <vue-draggable-resizable
      class="grid-draggable-handle"
      :w="8"
      :z="1"
      axis="x"
      :draggable="true"
      :resizable="false"
      @dragging="onDrag"
      @dragStop="onDragstop"
    />
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  name: 'ResizableGrid',
  components: {
    VueDraggableResizable
  },
  props: {
    minWidth: {
      type: Number,
      required: false,
      default: 250
    },
    maxWidthNum: {
      type: Number,
      required: false,
      default: 0
    },
    includeSibling: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data () {
    return {
      offsetX: 0,
      basicWidth: null
    }
  },
  computed: {
    maxWidth () {
      return this.maxWidthNum
        ? this.maxWidthNum
        : Math.max(document.documentElement.clientWidth / 2, parseInt(this.minWidth))
    }
  },
  created () {},
  mounted () {
    window.addEventListener('resize', this.onWindowResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onWindowResize)
  },
  methods: {
    // 更新父节点宽度及有兄弟节点时兄弟节点的宽度
    onDrag (x) {
      this.offsetX = x
      if (!this.basicWidth) {
        const parentNode = this.$refs.resizeGrid.parentNode
        this.basicWidth = parentNode.offsetWidth
      }

      const parentNode = this.$refs.resizeGrid.parentElement
      // const parentRect = parentNode.getBoundingClientRect()
      const nextWidth = this.basicWidth + this.offsetX

      // 伸缩的最小宽度和最大宽度
      if (nextWidth < this.minWidth || nextWidth > this.maxWidth) {
        return (this.offsetX = 0)
      }

      parentNode.style.width = nextWidth + 'px'

      // 修改宽度是否影响到兄弟元素的大小，如左右布局的内容
      if (this.includeSibling) {
        const uncleNode = parentNode.nextSibling
        const grandParentNode = parentNode.parentElement
        const grandParentRect = grandParentNode.getBoundingClientRect()

        uncleNode.style.width = `${grandParentRect.width - nextWidth}px`
      }
    },
    onDragstop () {
      // const parentNode = this.$refs.resizeGrid.parentElement;
      // const parentRect = parentNode.getBoundingClientRect();
      // this.x = parentRect.width;
    },
    onWindowResize () {
      if (!this.includeSibling) return
      setTimeout(() => {
        const parentNode = this.$refs.resizeGrid.parentElement
        const uncleNode = parentNode.nextSibling
        const parentRect = parentNode.getBoundingClientRect()
        const grandParentNode = parentNode.parentElement
        const grandParentRect = grandParentNode.getBoundingClientRect()
        uncleNode.style.width = `${Math.floor(grandParentRect.width - parentRect.width)}px`
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.resize-grid {
  position: relative;
  height: 100%;
  user-select: none;
  .grid-draggable-handle {
    top: 0;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
    transform: translateX(50%);
  }
}
</style>
